<template>
	<view class="container">
		<!-- 日期和当前时间 -->
		<view class="date-row">
			<view>
				<text class="date-main">February 20th</text>
				<view class="date-sub">Thursday</view>
			</view>
			<text class="big-time">{{ currentTime }}</text>
		</view>
		<!-- 打卡记录 -->
		 <div class="checkList">
			<div class="itemState" style="margin-bottom: 30rpx;" v-for="item,index in rule" :key="index" v-show="item.status != 3">
				<itemState :item="item" />
			</div>
		 </div>
		<!-- 表单区域 -->
		<view class="form-section">
			<text class="form-title">Submit your own fuel amount during work</text>
			<view class="form-input">
				<view class="form-title">
					<img src="/static/image/qianbi.png" alt="">
					<text>Today's fuel amount</text>
				</view>
				<view>
					<uv-input type="number" :inputAlign="'right'" v-model="amount" placeholder="Please fill in">
						<!-- vue3模式下必须使用v-slot:prefix -->
						<template v-slot:prefix>
							<img style="width: 13px;" src="/static//image/$.png" alt="">
						</template>
					</uv-input>
				</view>
			</view>

			<view class="form-input">
				<view class="form-title">
					<img src="/static/image/tp.png" alt="">
					<text>Upload pictures</text>
				</view>
				<view @click="handleUpload">
					<!-- <uv-upload :fileList="images" name="6" multiple :maxCount="1" width="250" height="150"> -->
						<uv-input :inputAlign="'right'" style="width: calc(100% - 40rpx)" disabled v-model="fuelAmount" placeholder="Upload pictures">
							<!-- vue3模式下必须使用v-slot:prefix -->
							<template v-slot:prefix>
								<img @click.stop="previewImage" v-if="imagesUrl" style="width: 18px;"  :src="imagesUrl" alt="">
								<img v-else style="width: 18px;" src="/static//image/upload.png" alt="">
							</template>
						</uv-input>
					<!-- </uv-upload> -->
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		 <view class="but-content">
			<view class="submit-btn" @click="handleSubmit">Submit</view>
		 </view>
		<!-- 右下角悬浮按钮 -->
		<view class="fab" @click="handleFabClick">
			<uv-icon name="calendar" color="#fff" size="28"></uv-icon>
		</view>
	</view>
</template>

<script>
import itemState from './itemState.vue'
import { getAttendanceRule, getPendingAttendance, attendaceOli, getAttendanceLogDetail } from '@/api/attendace'
import { getLeaveCategory } from '@/api/replacement'
import { uploadFile } from '@/api/home'
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
export default {

	data() {
		return {
			currentTime: '15:30:27',
			amount: '',
			rule: [],
			imagesUrl: '',
			images: []
		}
	},
	components: {
		itemState,
	},
	created(){
		this.getInfo()
        // getLeaveCategory({}).then(res =>{
        //     this.categoryList = res
        //     this.rule = res.rule
        //     this.selectedCategory = res && res[0] || {}
        // })
    },
	methods: {
		getInfo(){
			let date = dayjs().format('YYYY-MM-DD')
			getAttendanceLogDetail({date}).then(res => {
				console.log('getAttendanceLogDetail', res)
				this.rule = res.log
			})
			getAttendanceRule({date}).then(res => {
					this.currentRule = res.current_rule
					// this.rule = res.rule
				})
		},
		async handleSubmit() {
			if (!this.amount) {
        return uni.$uv.toast("Today's fuel amount");
      }
			if (!this.imagesUrl) {
        return uni.$uv.toast("Upload pictures");
      }
			await attendaceOli({
				amount: this.amount,
				images: this.imagesUrl,
			}).then(res => {
				uni.$uv.toast('Submit successfully')
				setTimeout(() => {
						uni.navigateBack();
				}, 1000)
			})
		},
		handleUpload() {
			let that = this;
			uni.chooseImage({
				count: 3,
				success: async (res) => {
					console.log('chooseImage', res);
					this.fileList = res.tempFilePaths.map(path => ({ url: path }));
					const result = await uploadFile(res.tempFilePaths[0]);
					that.imagesUrl = result.full_path;
				}
			});
		},
		handleFabClick() {
			uni.navigateTo({
				url: '/pages/Home/calendar'
			});
		},
		previewImage() {
			let url = this.imagesUrl;
			uni.previewImage({
				current: 0,
				urls: [url]
			});
		},
	}
}
</script>

<style scoped lang="scss">
.container {
	background: #f8f9fb;
	min-height: calc(100vh - 145rpx);
	padding: 0 24rpx 40rpx 24rpx;

}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40rpx;
}

.header-time {
	font-size: 36rpx;
	color: #111;
	margin-bottom: 10rpx;
}

.header-title {
	font-size: 44rpx;
	font-weight: bold;
	color: #222;
}

.date-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 54rpx 0 30rpx 0;
}

.date-main {
	font-size: 32rpx;
	font-weight: bold;
	color: #222;
}

.date-sub {
	font-size: 24rpx;
	color: #888;
	/* margin-left: 10rpx; */
}

.big-time {
	font-size: 60rpx;
	font-weight: bold;
	color: #222;
}

.card {
	background: #fff;
	border-radius: 28rpx;
	position: relative;
	box-shadow: 0 4rpx 24rpx #e6e6e6;
}

.card-row {
	display: flex;
	align-items: flex-start;
}

.card-icon {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;

	.icon {
		display: block;
		margin-top: 12rpx;
		text-align: center;

		.uv-icon {
			align-items: center;
			flex-direction: column;
		}
	}
}

.card-icon .sun {
	font-size: 32rpx;
	display: inline-block;
	width: 32rpx;
	height: 32rpx;
	color: #FFC300;
}

.card-info {
	flex: 1;
	margin-left: 18rpx;
}

.card-title-row {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.card-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #222;
}

.card-time {
	font-size: 24rpx;
	color: #bbb;
	margin-left: 12rpx;
}

.card-tag {
	font-size: 24rpx;
	color: #21C97A;
	background: #e6f7f0;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
	margin-left: 18rpx;
}

.card-detail {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	color: #555;
	margin-top: 12rpx;
}

.card-detail .iconfont {
	font-size: 18rpx;
	color: #bbb;
	margin-right: 8rpx;
}

.form-section {
	background: #fff;
	border-radius: 24rpx;
	padding: 32rpx 24rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 2rpx 12rpx #f0f0f0;
}

.form-title {
	font-weight: 500;
	font-size: 12px;
	color: #475467;
	text-align: left;
	margin-bottom: 24rpx;
	display: block;
	display: flex;
	align-items: center;

	img {
		width: 15px;
	}
}

.form-input {
	border: 1rpx solid #eee;
	border-radius: 20rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
}

.form-input .iconfont {
	font-size: 32rpx;
	color: #bbb;
	margin-right: 12rpx;
}

.form-input input {
	flex: 1;
	font-size: 28rpx;
}

.form-upload {
	margin-bottom: 8rpx;
}

.upload-text {
	font-size: 28rpx;
	color: #555;
	margin-bottom: 16rpx;
	display: block;
}

.upload-list {
	display: flex;
	flex-wrap: wrap;
}

.upload-item {
	width: 160rpx;
	height: 160rpx;
	margin-right: 16rpx;
	margin-bottom: 16rpx;
	border-radius: 12rpx;
	overflow: hidden;
}

.upload-item image {
	width: 100%;
	height: 100%;
}

.upload-add {
	width: 160rpx;
	height: 160rpx;
	border: 1rpx dashed #ddd;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.upload-add .iconfont {
	font-size: 48rpx;
	color: #bbb;
}

.submit-btn {
	width: calc(100% - 92rpx);
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: #21C97A;
	color: #fff;
	font-size: 36rpx;
	font-weight: bold;
	border-radius: 50rpx;
	margin: 26rpx 46rpx;
}
.but-content{
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
}

.fab {
	position: fixed;
	right: 30rpx;
	bottom: 240rpx;
	width: 100rpx;
	height: 100rpx;
	background: #21C97A;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx #21C97A55;
}

.fab .iconfont {
	font-size: 48rpx;
	color: #fff;
}
</style>